<template>
    <div class="box">
      <form action="/">
        <van-search
    v-model="value"
    placeholder="请输入搜索关键词"
    input-align="center"
    style="margin-top: 48px;"
    shape="round"
  />
  </form>
  
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <div v-for='(item, index) in list' :key="index"> 
    <!-- <div @click="toShop"> -->
      <div>
    <van-card
    :desc="item.desc"
    :title="item.title"
    :thumb="item.thumb"
    @click="toMemberList(index)"
  >
  </van-card>
  </div>
  </div>
  </van-list>
    </div>
  </template>
  
  <script>

  import { Toast } from 'vant';
  
  export default {
    name: 'ClassList',
    data() {
      return {
        value: '',
        list: [
          {
          desc: "这里是21级软件工程一班的描述",
          title: "21级软件工程一班",
          thumb: "./static/egg.jpg",
        },
          {
          desc: "这里是21级软件工程二班的描述",
          title: "21级软件工程二班",
          thumb: "./static/lizhi.jpg",
        },
          {
          desc: "这里是19级软件工程一班的描述",
          title: "19级软件工程一班",
          thumb: "./static/zhengwuyu.jpg",
        },
          {
          desc: "这里是19级软件工程二班的描述",
          title: "19级软件工程二班",
          thumb: "./static/youbing.jpg",
        },
          {
          desc: "这里是20级软件工程一班的描述",
          title: "20级软件工程一班",
          thumb: "./static/shuzhi.png",
        },
          {
          desc: "这里是20级软件工程二班的描述",
          title: "20级软件工程二班",
          thumb: "./static/egg.jpg",
        },
          {
          desc: "这里是21级软件工程一班的描述",
          title: "21级软件工程一班",
          thumb: "./static/egg.jpg",
        },
          {
          desc: "这里是21级软件工程二班的描述",
          title: "21级软件工程二班",
          thumb: "./static/lizhi.jpg",
        },
          {
          desc: "这里是19级软件工程一班的描述",
          title: "19级软件工程一班",
          thumb: "./static/zhengwuyu.jpg",
        },
          {
          desc: "这里是19级软件工程二班的描述",
          title: "19级软件工程二班",
          thumb: "./static/youbing.jpg",
        },
          {
          desc: "这里是20级软件工程一班的描述",
          title: "20级软件工程一班",
          thumb: "./static/shuzhi.png",
        },
          {
          desc: "这里是20级软件工程二班的描述",
          title: "20级软件工程二班",
          thumb: "./static/egg.jpg",
        },
          {
          desc: "这里是21级软件工程一班的描述",
          title: "21级软件工程一班",
          thumb: "./static/egg.jpg",
        },
          {
          desc: "这里是21级软件工程二班的描述",
          title: "21级软件工程二班",
          thumb: "./static/lizhi.jpg",
        },
          {
          desc: "这里是19级软件工程一班的描述",
          title: "19级软件工程一班",
          thumb: "./static/zhengwuyu.jpg",
        },
          {
          desc: "这里是19级软件工程二班的描述",
          title: "19级软件工程二班",
          thumb: "./static/youbing.jpg",
        },
          {
          desc: "这里是20级软件工程一班的描述",
          title: "20级软件工程一班",
          thumb: "./static/shuzhi.png",
        },
          {
          desc: "这里是20级软件工程二班的描述",
          title: "20级软件工程二班",
          thumb: "./static/egg.jpg",
        },
      ],
        loading: false,
        finished: false,
      };
    },
    mounted() {
      this.loading = false;
    },
    methods: {
      // titleName(){
      //   eventBus.$emit('titleName', this.list[0].title);
      // },
      onSearch(val) {
        Toast(val);
      },
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
  
          // 加载状态结束
          this.loading = false;
  
          // 数据全部加载完成
          if (this.list.length >= 10) {
            this.finished = true;
          }
        }, 1000);
        
      },
      toMemberList(a){
        // EventBus.$emit('titleName', this.list[0].title);
        this.$router.push('ClassMemberList/' + this.list[a].title);  
      }
      // onCancel() {
      //   Toast('取消');
      // },
    },
  };
  </script>
  
  <style scoped lang="less">
  ::v-deep .van-card__title {
    font-size: 500px;
    // background-color: black;
  }
  ::v-deep .van-card__desc {
    font-size: 500px;
    background-color: white;
  }
  </style>